<template>
  <div class="container article-detail grid-container">
    <div ref="code" class="markdown-body flex1" v-html="detail.content"></div>
    <page-aside :tags="tags"></page-aside>
  </div>
</template>

<script>
import { mapState } from "vuex";

import PageAside from "~/components/pageAside";
import request from "~/assets/request";

export default {
  name: "detail",
  data() {
    return {};
  },
  head() {
    return {
      title: this.detail.title
    };
  },
  async fetch({ store, params, query }) {
    const { data = {} } = await request({
      url: `/api/article/${params.id || query.id}`
    });
    await store.dispatch("fetchTags");
    store.dispatch("setState", {
      detail: data
    });
  },
  computed: {
    ...mapState(["detail", "tags"])
  },
  components: {
    PageAside
  },
  methods: {
    init() {
      const blocks = this.$refs.code.querySelectorAll("pre code");
      blocks.forEach((block, num) => {
        let i = 1;
        const n = m => `<em class="line-label">${m > 9 ? m : "0" + m}</em>`;
        block.innerHTML = `<div class="line">${n(i)}${block.innerHTML.replace(
          /\n/g,
          function(word) {
            i += 1;
            return `</div><div class="line">${n(i)}`;
          }
        )}</div>`;
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss">
@import "./highlight.css";
@import "./markdown.css";
.article-detail {
  padding-bottom: 30px;
  overflow: auto;
  a {
    color: #2a6496;
  }
  .markdown-body::-webkit-scrollbar {
    display: none;
  }
}
</style>
